export function useStarCanvas() {
    let ctx:any = null
    let width = 0
    let height = 0
    let stars:any = []
    let meteors:any = []
    let animationId:any = null

    // 创建星星
    const createStar = () => {
        return {
            x: Math.random() * width,
            y: Math.random() * height,
            radius: Math.random() * 1.5,
            alpha: Math.random(),
            velocity: Math.random() * 0.002
        }
    }

    // 创建流星
    const createMeteor = () => {
        return {
            x: Math.random() * width,
            y: 0,
            length: Math.random() * 80 + 100,
            speed: Math.random() * 10 + 10,
            angle: Math.PI / 4
        }
    }

    // 初始化画布
    const initCanvas = (canvas:any) => {
        if (!canvas) return

        ctx = canvas.getContext('2d')
        width = canvas.width = window.innerWidth
        height = canvas.height = window.innerHeight

        // 创建星星
        for (let i = 0; i < 200; i++) {
            stars.push(createStar())
        }

        animate()

        // 每隔一段时间创建新的流星
        setInterval(() => {
            meteors.push(createMeteor())
        }, 2000)
    }

    // 动画循环
    const animate = () => {
        ctx.clearRect(0, 0, width, height)
        ctx.fillStyle = '#000'
        ctx.fillRect(0, 0, width, height)

        // 绘制星星
        stars.forEach((star:any) => {
            ctx.beginPath()
            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
            ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`
            ctx.fill()

            star.alpha += star.velocity
            if (star.alpha > 1 || star.alpha < 0) {
                star.velocity = -star.velocity
            }
        })

        // 绘制流星
        meteors.forEach((meteor:any, index:any) => {
            ctx.save()
            ctx.beginPath()
            ctx.translate(meteor.x, meteor.y)
            ctx.rotate(meteor.angle)

            const gradient = ctx.createLinearGradient(0, 0, meteor.length, 0)
            gradient.addColorStop(0, 'rgba(255, 255, 255, 0)')
            gradient.addColorStop(1, 'rgba(255, 255, 255, 0.8)')

            ctx.strokeStyle = gradient
            ctx.lineWidth = 2
            ctx.moveTo(0, 0)
            ctx.lineTo(meteor.length, 0)
            ctx.stroke()
            ctx.restore()

            meteor.x += Math.cos(meteor.angle) * meteor.speed
            meteor.y += Math.sin(meteor.angle) * meteor.speed

            // 移除超出画布的流星
            if (meteor.x > width || meteor.y > height) {
                meteors.splice(index, 1)
            }
        })

        animationId = requestAnimationFrame(animate)
    }

    // 清理函数
    const destroyCanvas = () => {
        if (animationId) {
            cancelAnimationFrame(animationId)
        }
        stars = []
        meteors = []
    }

    // 响应式调整
    window.addEventListener('resize', () => {
        if (ctx && ctx.canvas) {
            width = ctx.canvas.width = window.innerWidth
            height = ctx.canvas.height = window.innerHeight
        }
    })

    return {
        initCanvas,
        destroyCanvas
    }
}